<template>
  <div class="box">
    <el-table :data="tableData" :span-method="objectSpanMethod" border>
      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="id" label="审核内容" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="审核模式" width="180" align="center">
      </el-table-column>
      <el-table-column prop="amount1" label="人员设置" align="center">
        <template slot-scope="scope">
          <div class="personnel">
            <div style="display: flex;" v-if="scope.row.amount1.length">
              <div class="personnelBtn" v-for="(item, index) in scope.row.amount1" :key="index">
                <span style="margin-right: 10px;">{{ index + 1 }}. {{ item.name }}</span>
                <i @click="delPersonnel(scope.row, item.val)" style="cursor: pointer;" class="el-icon-close"></i>
              </div>
            </div>

            <el-select v-if="scope.row.addTo" v-model="optionVal" placeholder="请选择" @change="change($event, scope.row)">
              <el-option v-for="(item, index) in people" :key="index" :label="item.label" :value="item.value"> </el-option>
            </el-select>

            <i v-if="!scope.row.addTo" @click="addTo(scope.row)" class="el-icon-plus addTo"></i>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ToExamine",
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          id: "1",
          title: "新建订单审核",
          addTo: false,
          name: "审核人",
          amount1: [{
            name: '王二',
            val: 1
          }, {
            name: '张三',
            val: 2
          }],
        },
        {
          id: "2",
          title: "新建订单审核",
          addTo: false,
          name: "告知人",
          amount1: [{
            name: '王二',
            val: 1
          }],
        },
        {
          id: "3",
          title: "作废订单审核",
          addTo: false,
          name: "审核人",
          amount1: [{
            name: '王二',
            val: 1
          }],
        },
        {
          id: "4",
          title: "作废订单审核",
          addTo: false,
          name: "告知人",
          amount1: [{
            name: '王二',
            val: 1
          }],
        },
        {
          id: "5",
          title: "配送审核",
          addTo: false,
          name: "审核人",
          amount1: [{
            name: '王二',
            val: 1
          }],
        },
        {
          id: "6",
          title: "配送审核",
          addTo: false,
          name: "告知人",
          amount1: [{
            name: '王二',
            val: 1
          }],
        },
      ],
      optionVal: '',
      people: [{
        label: '王二',
        value: '1',
      }, {
        label: '张三',
        value: '2',
      }, {
        label: '李四',
        value: '3',
      }]
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    addTo(row) {
      row.addTo = !row.addTo
      this.optionVal = ''
      console.log(row, '添加')
    },
    delPersonnel(row, val) {
      row.amount1 = row.amount1.filter(item => { return item.val !== val })
      console.log(row.amount1, val, '删除')
    },
    change(e, val) {
      val.addTo = false
      this.people.forEach(item => {
        if (item.value === e) {
          console.log(item)
          val.amount1.push({
            name: item.label,
            val: item.value
          })
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.box {
  padding: 20px;
  .personnel{
    display: flex;
    align-items: center;
  }
  .personnelBtn {
    background: #3994fb;
    border-radius: 5px;
    padding: 2px 12px;
    color: #fff;
    margin-right: 20px;
    display: flex;
    align-items: center;
  }
  .addTo {
    color: #ffff;
    font-size: 12px;
    cursor: pointer;
    margin-right: 20px;
    background: #3994fb;
    border-radius: 5px;
    padding: 4px;
    font-weight: 700;
  }
}
</style>
